<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>仿微信聊天滚动</title>
		<style>
			.parent {
				height: 200px;
				background: green;
				overflow-y: overlay;
				padding: 0 5px;
			}

			.child {
				height: 100%;
				background: yellow;
			}

			.child div {
				height: 300px;
				background: yellow;
				border-top: 5px solid red;
				border-bottom: 5px solid red;
			}
		</style>
	</head>

	<body>
		<div>
			<input
				type="button"
				onclick="handleScroll()"
				value="点击滚动到底部"
			/>
			<div class="wrapper">
				<div class="parent">
					<div class="child">
						<div>聊天内容</div>
					</div>
				</div>
			</div>
		</div>

		<script>
			function handleScroll() {
				var parent = document.querySelector('.parent')
				var child = document.querySelector('.child')
				var y = child.scrollHeight - child.clientHeight
				console.log('clientHeight', child.clientHeight)
				console.log('scrollHeight', child.scrollHeight)
				console.log('offsetHeight', child.offsetHeight)
				parent.scrollTo(0, y)
			}
		</script>
	</body>
</html>
